<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta name="layout" content="mobile">
    <title>Facility Search Results</title>
    
    <g:javascript library="jquery"/>

  </head>
  <body>
    <h1>Search Results</h1>
    <p>
      Searched ${healththink.Facility.count()} records
      for items matching <em>${term}</em>.
      Found ${facilities.size()} Facilities:
    </p>
    <div style="display: block">
      <g:each var="facility" in="${facilities}">
        <div>
          <g:form action="view">
            <g:hiddenField name="name" value="${facility.name}"/>
            <g:submitButton name="submit" value="${facility.name}"/>
          </g:form>
          <div style="display:block;"> Distance: 
	          <div id="dis_${facility.id}"
                 style="display:inline;"
	               name="${facility.id}"> calculating...
	          </div>
            <div style="display:inline;">
              <input 
                type="button" 
                onclick="showMap('${facility.id}');" 
                class="MapButtonLink" 
                value="Show Map" /> 
            </div>
          </div>
          <input id="lat_${facility.id}" type="hidden" name="Lat" value="${facility.latitude}"/>
          <input id="lng_${facility.id}" type="hidden" name="Lng" value="${facility.longitude}"/>
        </div>
        <hr/>
      </g:each>
    </div>
    </br>
    <br/>  
    <div>
      <div id="map_canvas" class="mapCanvas"></div>
      <div id="map_directions" class="mapDirections"></div>
    </div>
    <br/>
    <form action="search">
      <g:submitButton name="submit" value="Search Again" data-icon="back"/>
    </form>
  </body>
</html>
